<template>
  <div class="videoFormContainer">
    <Drawer
      :title="formData.title"
      :value="formData.showForm"
      width="800"
      @on-close="handleCancel"
      :mask-closable="false"
    >
      <Form :model="form" :label-width="120" :rules="rules" ref="form">
        <Row>
          <Col span="12">
            <FormItem label="培训任务名称：" prop="name">
              <Input v-model="form.name" :maxlength="NAME_LENGTH_LIMIT" placeholder="请输入培训任务名称" />
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="培训对象：" prop="name">
              <Select v-model="form.train_type" :disabled="readonly">
                <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="资料类型：" prop="train_type">
              <Select v-model="form.train_type" :disabled="readonly">
                <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="资料名称：" prop="train_type">
              <Input v-model="form.name" :maxlength="NAME_LENGTH_LIMIT" placeholder="请输入资料名称" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="培训方式：" prop="train_type">
              <Select v-model="form.train_type" :disabled="readonly">
                <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12" v-if="form.train_type">
            <FormItem label="讲师：" prop="train_type">
              <Input v-model="form.teacher" :maxlength="NAME_LENGTH_LIMIT" placeholder="请输入资料名称" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="培训开始时间：" prop="train_type">
              <DatePicker type="datetime" placeholder="请选择培训开始时间" class="w100" @on-change="trainStartChange"></DatePicker>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="培训结束时间：" prop="train_type">
              <DatePicker type="datetime" placeholder="请选择培训结束时间" class="w100" @on-change="trainEndChange"></DatePicker>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="12">
            <FormItem label="培训类型：" prop="train_type">
              <Select v-model="form.train_type" :disabled="readonly">
                <Option :value="item.code" v-for="item in eprList" :key="item.code">{{item.name}}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="是否需要考试：" prop="train_type">
              <i-switch
                size="large"
                v-model="form.test"
                @on-change="switchChange"
                true-value="1"
                false-value="0"
              >
                <span slot="open">是</span>
                <span slot="close">否</span>
              </i-switch>
            </FormItem>
          </Col>
        </Row>
        <Row v-if="this.form.test==='1'">
          <Col span="12">
            <FormItem label="考试开始时间：" prop="train_type">
              <DatePicker type="datetime" placeholder="请选择考试开始时间" class="w100" @on-change="testStartChange"></DatePicker>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="考试结束时间：" prop="train_type">
              <DatePicker type="datetime" placeholder="请选择考试结束时间" class="w100" @on-change="testEndChange"></DatePicker>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div class="frow fjcc">
        <Button type="default" @click="handleCancel" class="mr20">{{formData.type=='2'?'关闭':'取消'}}</Button>
        <Button type="primary" @click="handleSubmit" v-if="!readonly">确定</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import mixin from '@/mixin'
export default {
  name: 'videoFormContainer',
  mixins: [mixin],
  props: {
    formData: Object
  },
  data () {
    return {
      form: {
        test: '0'
      },
      eprList: [],
      rules: {}
    }
  },
  watch: {
    formData (newValue) {
      console.log(newValue)
      this.form = newValue.info
    }
  },
  computed: {
    readonly () {
      return this.formData.type == '2'
    }
  },
  methods: {
    // 取消
    handleCancel () {
      this.$refs.form.resetFields()
      this.$emit('handleCancel')
    },
    // 确定
    handleSubmit () {
      console.log(this.form)
    },
    switchChange (e) {
      this.form.test = e
    },
    trainStartChange () {

    },
    trainEndChange () {

    },
    testStartChange (e) {
      console.log(e, typeof (e))
    },
    testEndChange () {}
  }
}
</script>

<style lang="less" scoped>
.videoName {
  width: 120px;
  height: 32px;
}
</style>
